<template>
	<view class="u-page">
		<view class="content">
			<view class="round">
				<view class="gui-padding">
					<u-swiper :list="swipers" :height="150" :autoplay="true" @change="e => currentNum = e.current"
						indicator>
						<view slot="indicator" class="indicator">
							<view slot="indicator" class="indicator-num">
								<text class="indicator-num__text">{{currentNum}}</text>
							</view>
						</view>
					</u-swiper>
				</view>
			</view>
			<view class="gui-bg-blue7 gui-padding-x">
				<gui-speaker :items="notices" :itemClass="['gui-color-blue']">
					<template v-slot:icon>
						<u-icon name="volume" color="#3688FF" size="28"></u-icon>
					</template>
				</gui-speaker>
			</view>

			<view class="gui-flex gui-row gui-nowrap gui-justify-content-center">
				<view class="card" @tap="toSchdule">
					<image src="../../static/assets/images/calendar.png" mode="widthFix"
						style="width:72rpx;will-change: transform;"></image>
					<view class="gui-margin-top" style="font-size: 36rpx;color:black;">课程预约</view>
				</view>
				<view class="card" @tap="toSign">
					<image src="../../static/assets/images/book.png" mode="widthFix"
						style="width:72rpx;will-change: transform;"></image>
					<view class="gui-margin-top" style="font-size: 36rpx;color:black;">上课签到</view>
				</view>
			</view>
			<view class="hulu-empty-paragraph">

			</view>
			<view class="gui-margin" v-if="groupactivity.ID!=0&&showGroupacti">
				<text style="color:black;">限时拼团🔥</text>
			</view>

			<view class="gui-margin-top gui-padding-small"
				style="width:750rpx;margin-bottom: 30rpx;background-color: #F92E44;box-sizing: border-box;"
				v-if="groupactivity.ID!=0&&showGroupacti" @tap="toGroupActi">
				<view class="gui-relative">
					<view style="display: flex;justify-content: flex-end;align-items:center;">
						<view class="grpacti-text">
							{{groupactivity.start_time}}
							<text class="gui-text-small">开抢</text>
						</view>

						<image :src="groupactivity.post" style="z-index:1;
						margin: auto; 
						width:720rpx;
						border-radius: 6rpx;" mode="widthFix">
						</image>
						<view class="gcontent">
							<text class="gui-text-small" style="text-shadow: none;">最低</text>
							{{lowestPrice}}
							<text class="gui-text-small" style="text-shadow: none;">元</text>
						</view>
						<view class="glitch" :data-text="groupactivity.title">
						</view>
					</view>
				</view>
			</view>
			<view class="hulu-empty-paragraph">

			</view>
			<view class="gui-margin">
				<text style="color:black;">推荐活动🔥</text>
			</view>
			<view class="gui-margin">
				<!-- 60rpx 750-60=690-->
				<view class="gui-flex gui-row gui-align-items-center" v-if="activities.length>0">
					<!-- width300 -->
					<view class="gui-block acti1" v-if="activities[0]" style="width:300rpx;height:300rpx;"
						@tap="toActi(activities[0])">
						<image :src="activities[0]['post']"
							style="width:300rpx;height:300rpx;border-radius: 6rpx;will-change: transform;"
							mode="aspectFill"></image>
						<text
							style="position:absolute;bottom:10rpx;left:50%;transform: translate(-50%);font-size: 24rpx; color:white;text-align: center;z-index:100;">
							{{activities[0]['title']}}
						</text>
					</view>
					<!-- width:390 -->
					<view class="gui-flex gui-column gui-space-between" style="height:300rpx;width:390rpx;"
						v-if="activities[1]">
						<view @tap="toActi(activities[1])"
							class="gui-block gui-text-small  gui-text-center acti2 gui-dark-bg-level-3 gui-color-gray">
							<image :src="activities[1]['post']"
								style="width:380rpx;height:145rpx;border-radius: 6rpx;will-change: transform;"
								mode="aspectFill"></image>
							<text
								style="position:absolute;top:5rpx;left:50%;transform: translate(-50%);font-size: 24rpx; color:white;text-align: center;z-index:100;">
								{{activities[1]['title']}}
							</text>
						</view>
						<view @tap="toActi(activities[2])" v-if="activities[2]"
							class="gui-block gui-text-small  gui-text-center acti3 gui-dark-bg-level-3 gui-color-gray">
							<image :src="activities[2]['post']"
								style="width:380rpx;height:145rpx;border-radius: 6rpx;will-change: transform;"
								mode="aspectFill"></image>
							<text
								style="position:absolute;top:5rpx;left:50%;transform: translate(-50%);font-size: 24rpx; color:white;text-align: center;z-index:100;">
								{{activities[2]['title']}}
							</text>
						</view>

					</view>
				</view>
				<view class="" v-else>
					<hulu-empty></hulu-empty>
				</view>
			</view>
			<view class="hulu-empty-paragraph">

			</view>
			<view class="gui-margin">
				<view class="" style="margin-bottom: 20rpx;position:relative;height:40rpx;">
					<view style="color:black;">精品团体课</view>
					<view class="" style="line-height: 40rpx;position: absolute;right:10rpx;top:0rpx;display: flex;"
						@tap="toGcList">
						<text class="gui-text-small">更多</text>
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>
				<view class="">

					<view class="" v-if="groupcourses.length>0">
						<u-scroll-list>
							<view v-for="(item, index) in groupcourses" :key="index"
								style="margin-right: 20rpx;border:1px solid #ddd;box-sizing: border-box;border-radius: 10rpx;"
								@tap="toGroupcourse(item)">
								<image :src="item.cover_image"
									style="width:320rpx;border-radius: 10rpx;box-sizing: border-box;will-change: transform;"
									mode="widthFix">
								</image>
								<view class="" style="">
									<view class="gui-text gui-padding-x">{{item.name}}</view>
									<view class="gui-text-small gui-padding-x" style='margin-top:10rpx;'>
										<text
											class="gui-padding-small hulu-bg-primary-color1 hulu-primary-color">{{item.course_type.name}}</text>
									</view>
									<view class="" style="height:24rpx;">

									</view>
								</view>

							</view>
						</u-scroll-list>
					</view>
					<view class="" v-else>
						<hulu-empty></hulu-empty>
					</view>
				</view>

			</view>
			<view class="hulu-empty-paragraph">

			</view>
			<view class="gui-margin">
				<view class="" style="margin-bottom: 20rpx;position:relative;height:40rpx;">
					<view style="color:black;">团队风采</view>
				</view>
				<view>
					<view class="" v-if="employees.length>0">
						<u-scroll-list :indicator="false">
							<view v-for="(item, index) in employees" :key="index" @tap="toEmployee(item)">
								<view class="emple-box">
									<view class="gui-flex gui-justify-content-center gui-relative">
										<image :src="item.avatar"
											style="width:256rpx;height:256rpx; border-radius: 50%;display: block;will-change: transform;"
											mode="widthFix">
										</image>
										<view class="">
											<image src="../../static/assets/images/huizhang.png"
												style="width:64rpx;height:64rpx;position: absolute;right:12rpx;top:20rpx;will-change: transform;"
												mode="widthFix"></image>
										</view>
									</view>
									<view class="gui-text gui-color-white gui-padding-x">{{item.nick_name}}</view>
									<view class="gui-text-small"
										style="color:white;position: absolute;right:0;bottom:0;">
										<text v-if="item.jobrole_id=='teacher'"
											class="hulu-level1 gui-padding-small">教练</text>
										<text v-if="item.jobrole_id=='saleman'"
											class="hulu-level2 gui-padding-small">顾问</text>
									</view>
								</view>
							</view>
						</u-scroll-list>
					</view>
					<view class="" v-else>
						<hulu-empty></hulu-empty>
					</view>
				</view>
			</view>
			<view class="hulu-empty-paragraph">

			</view>
			<view class="gui-margin">
				<view class="" style="margin-bottom: 20rpx;position:relative;height:40rpx;">
					<view style="color:black;">推荐私教课</view>
					<view class="" style="line-height: 40rpx;position: absolute;right:12rpx;top:0rpx;display: flex;"
						@tap="toPcList">
						<text class="gui-text-small">更多</text>
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>
				<view class="">
					<view class="" v-if="personalcourses.length>0">
						<u-scroll-list>
							<view v-for="(item, index) in personalcourses" :key="index" @tap="toPersonalcourse(item)"
								style="margin-right: 20rpx;
										  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
										  border:2rpx solid #ddd;
										  box-sizing: border-box;">
								<image :src="item.cover_image" style="width:320rpx;will-change: transform;"
									mode="widthFix">
								</image>
								<view class="gui-text gui-margin-x">{{item.name}}</view>
								<view class="gui-margin">
									<view class="gui-text-small">
										<text class="gui-padding-small">
											{{item.Employee.nick_name}}亲授
										</text>
										<text class="gui-padding-small gui-color-blue3 gui-text">
											{{item.duration}}分钟
										</text>
									</view>
									<view class="gui-text-small" style='margin-top:10rpx;'>
										<text class="gui-color-red gui-text gui-h4">￥</text>
										<text class="gui-padding-small gui-color-red gui-text gui-h4 gui-bold">
											{{item.price}}/节
										</text>
									</view>
								</view>

							</view>
						</u-scroll-list>
					</view>

					<view class="" v-else>
						<hulu-empty></hulu-empty>
					</view>
				</view>

			</view>

			<view class="hulu-empty-paragraph"></view>
			<view class="gui-margin">
				<view class="" style="margin-bottom: 20rpx;position:relative;height:40rpx;">
					<view style="color:black;">🏊场馆环境</view>
				</view>
				<u-swiper :list="videos" :showTitle="true" keyName="url" :autoplay="false"></u-swiper>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-margin">
				<view class="" style="margin-bottom: 20rpx;position:relative;height:40rpx;">
					<view style="color:black;">关于我们</view>
					<view class="" style="line-height: 40rpx;position: absolute;right:12rpx;top:0rpx;display: flex;"
						@tap="toIntro">
						<text class="gui-text-small">更多</text>
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>

				<view class="">

					<rich-text :nodes="config.introduce" class="rich-text" style="font-size: 24rpx;">

					</rich-text>
					<view style="background: linear-gradient(135deg,#a5d8ff,#e7f5ff);;border-radius: 22rpx;"
						class="gui-margin-top">
						<view class="gui-padding-small">
							<view class="gui-flex gui-justify-content-start gui-align-items-center"
								style="font-size: 24rpx;line-height: 28px;">
								<u-icon name="map-fill" color="#2979ff" size="20" @tap="navTo"></u-icon>
								<text>地址：{{config.address}}</text>

							</view>
							<view class="gui-flex  gui-justify-content-start gui-align-items-center"
								style="font-size: 24rpx;line-height: 28px;">
								<u-icon name="phone-fill" color="#2979ff" size="20" @tap="callPhone"></u-icon>
								<text>电话：{{config.phone}}</text>

							</view>
							<view class="gui-flex  gui-justify-content-start gui-align-items-center"
								style="font-size: 24rpx;line-height: 28px;">
								<u-icon name="weixin-fill" color="#2979ff" size="20"></u-icon>
								<text>微信：{{config.wechat}}</text>
							</view>
							<view class="gui-flex  gui-justify-content-start gui-align-items-center"
								style="font-size: 24rpx;line-height: 28px;">
								<u-icon name="clock-fill" color="#2979ff" size="20"></u-icon>
								<text>营业时间：{{config.open_time}}</text>
							</view>
						</view>
					</view>

				</view>
				<view style="height:88rpx;">

				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app'
	import useSwiper from '@/api/swiper'
	import useGroupcourse from '@/api/groupcourse'
	import useEmployee from '@/api/employee'
	import usePersonalcourse from '@/api/personalcourse'
	import useNotice from '@/api/notice'
	import useActivity from '@/api/activity'
	import dayjs from 'dayjs'
	import useConfig from '@/api/config'
	import useGroupactivity from '@/api/groupactivity'
	import { ref } from 'vue'
	const { swipers, getSwipers } = useSwiper()
	const { employees, getEmployees } = useEmployee()
	const { groupcourses, getGroupCourse } = useGroupcourse()
	const { personalcourses, getPersonalCourse } = usePersonalcourse()
	const { getNotice, notices } = useNotice()
	const { getActivities, activities } = useActivity()
	const { config, getConfig } = useConfig()
	const {
		showGroupactivity,
		groupactivity
	} = useGroupactivity()
	const currentNum = ref(0)

	const videos = ref([])
	//显示抢购逻辑
	const toStartTime = ref()
	const endTime = ref()
	const showGroupacti = ref(false)
	const lowestPrice = ref(0)
	const handleShow = () => {
		if (groupactivity.value) {
			toStartTime.value = dayjs(groupactivity.value.start_time)
			endTime.value = dayjs(groupactivity.value.end_time)
			let before_day = groupactivity.value.before_day
			const currentTime = dayjs();
			const differenceInDays = currentTime.diff(toStartTime.value, 'day');
			if (differenceInDays < before_day) {
				showGroupacti.value = true
			} else {
				showGroupacti.value = false
			}
			//如果当前时间比结束时间小，显示
			if (currentTime.isBefore(endTime.value)) {
				console.log("显示")
				showGroupacti.value = true
			} else {
				console.log("不显示")
				showGroupacti.value = false
			}

		}
		if(groupactivity.value.Groupactivityoptions){
			lowestPrice.value = groupactivity.value.Groupactivityoptions.sort((a, b) => { return a.current_price - b.current_price })[0]['current_price']
		}
	}

	const initPage = async () => {
		await getSwipers();
		await getActivities();
		await getNotice();
		await getGroupCourse(2);
		await getEmployees();
		await getPersonalCourse(2);
		await getConfig();
		await showGroupactivity()
		videos.value = config.value.specials.filter(item => item.category == 'video')
		videos.value = videos.value.map(item => {
			return {
				...item,
				title: item.name,
				type: "video"
			}
		})
		handleShow()
	}
	const toActi = (item) => {
		console.log(item.ID)
		uni.navigateTo({
			url: `/subpage/activity/index?id=${item.ID}`
		})
	}

	const toGroupActi = () => {
		uni.navigateTo({
			url: `/subpage/groupactivity/index`
		})
	}

	const toIntro = () => {
		uni.navigateTo({
			url: `/subpage/introduce/index`
		})
	}
	const toGroupcourse = (item) => {
		uni.navigateTo({
			url: `/subpage/groupcourse/index?id=${item.ID}`
		})
	}
	const toEmployee = (item) => {
		uni.navigateTo({
			url: `/subpage/employee/index?id=${item.ID}`
		})
	}
	const toPersonalcourse = (item) => {
		uni.navigateTo({
			url: `/subpage/personalcourse/index?id=${item.ID}`
		})
	}
	const toGcList = () => {
		uni.navigateTo({
			url: `/subpage/groupcourse/list`
		})
	}
	const toPcList = () => {
		uni.navigateTo({
			url: `/subpage/personalcourse/list`
		})
	}
	const navTo = () => {
		uni.openLocation({
			latitude: config.value.coordinates.coordinates[1],
			longitude: config.value.coordinates.coordinates[0],
		})
	}
	const callPhone = () => {
		uni.makePhoneCall({
			phoneNumber: config.value.phone,
			success: (res) => {
				console.log('调用成功!')
			},
			fail: (res) => {
				console.log('调用失败!')
			}
		});
	}
	const toSchdule = () => {
		uni.switchTab({
			url: `/pages/appointment/index`
		})
	}
	const toSign = () => {
		uni.navigateTo({
			url: `/subpage/sign/my`
		})
	}

	initPage();
	//下拉刷新
	onPullDownRefresh(async () => {
		await initPage().then(_ => {
			console.log("停止刷新...")
			uni.stopPullDownRefresh()
		})
	})

	onShareAppMessage(() => {
		return {
			title: '葫芦游泳',
			path: '/pages/index/index' // 分享路径，可以传递参数等信息
		}
	})
</script>

<style lang="scss">
	.card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 180rpx;
		border-radius: 4rpx;
		// background-color: #FFBFBF;
		font-size: 22rpx;
		text-align: center;
		margin: 10rpx;
	}

	.round {
		position: relative;
		width: 750rpx;
		box-sizing: border-box;
		height: auto;

		&::before {
			position: absolute;
			content: "";
			width: 750rpx;
			height: 80%;
			z-index: -1;
			background-color: #2A82E4;
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.acti1 {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			font-family: "AlibabaPuHuiTi";
			font-size: 24px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			border-bottom-left-radius: 6rpx;
			border-bottom-right-radius: 6rpx;
			bottom: 0;
			box-sizing: border-box;
			left: 0;
			width: 100%;
			height: 25%;
			background-color: rgba(2, 93, 196, 0.87);
		}
	}

	.acti2 {
		position: relative;
		width: 380rpx;
		margin-left: 10rpx;

		&::after {
			content: "";
			position: absolute;
			font-family: "AlibabaPuHuiTi";
			font-size: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			border-top-left-radius: 6rpx;
			border-top-right-radius: 6rpx;
			top: 0;
			box-sizing: border-box;
			left: 0;
			width: 380rpx;
			height: 25%;
			background-color: rgba(2, 93, 196, 0.87);
		}
	}

	.acti3 {
		position: relative;
		width: 380rpx;
		margin-left: 10rpx;

		&::after {
			content: "";
			color: #A6A6A6;
			position: absolute;
			font-family: "AlibabaPuHuiTi";
			font-size: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			border-top-left-radius: 6rpx;
			border-top-right-radius: 6rpx;
			top: 0;
			box-sizing: border-box;
			left: 0;
			width: 380rpx;
			height: 25%;
			background-color: rgba(2, 93, 196, 0.87);
		}
	}

	.emple-box {
		margin-right: 20rpx;
		width: 320rpx;
		height: 360rpx;
		background-color: #2A82E4;
		border-radius: 20rpx;
		box-sizing: border-box;
		position: relative;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
		padding: 10rpx 10rpx;
	}

	.gcontent {
		position: absolute;
		z-index: 2;
		height: 88rpx;
		width: 600rpx;
		text-align: center;
		font-family: 'AlibabaPuHuiTi';
		left: 50%;
		font-size: 88rpx;
		right: 50%;
		color: #FF5601;
		transform: translate(-50%);
		text-shadow: -4rpx 3rpx 0 #3a50d9, -7rpx 7rpx 0 #0a0e27;
	}

	// 活动动态文字效果
	.glitch {
		position: absolute;
		font-family: 'AlibabaPuHuiTi';
		width: 750rpx;
		height: auto;
		right: 0;
		top: 0;
		font-size: 48rpx;
		box-sizing: border-box;
		font-weight: bold;
		color: #ffffff;
		z-index: 1;
	}

	.glitch:before,
	.glitch:after {
		display: block;
		content: attr(data-text);
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		opacity: 0.8;
	}

	.glitch:before {
		animation: glitch-it 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
		color: #00ffff;
		z-index: -1;
	}

	.glitch:after {
		animation: glitch-it 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
		color: #ff00ff;
		z-index: -2;
	}

	@keyframes glitch-it {
		0% {
			transform: translate(0);
		}

		20% {
			transform: translate(-2px, 2px);
		}

		40% {
			transform: translate(-2px, -2px);
		}

		60% {
			transform: translate(2px, 2px);
		}

		80% {
			transform: translate(2px, -2px);
		}

		to {
			transform: translate(0);
		}
	}

	.grpacti-text {
		font-family: 'AlibabaPuHuiTi';
		z-index: 10;
		color: #FF5601;
		font-size: 36rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		// text-shadow: -4rpx 3rpx 0 #3a50d9, -7rpx 7rpx 0 #0a0e27;
	}
</style>